<template>
  <div>
    <!--只选最后一个-->
    <!--<el-cascader
           v-bind="$attrs"
           v-on="$listeners"
           :options="options"
           :props="params.props"
           v-model="value1"
           clearable
           :disabled="writeLoading"
           @active-item-change="handleItemChange"
        >
    </el-cascader>-->
    <!--选择即改变-->
    <el-cascader
      class="wp100"
      v-bind="$attrs"
      v-on="$listeners"
      :options="options"
      :props="params.props"
      v-model="value1"
      clearable
      change-on-select
      @change="changeCity"
      :disabled="writeLoading"
      size="small"
    ></el-cascader>
    <i class="el-icon-loading poab" v-if="writeLoading" style="top: 14px;right: 10px;"></i>
  </div>
</template>

<script>
// import { cinema } from '@/api'
export default {
  props: {
    value: {
      type: [Object, Array],
      default: () => {
        return null
      }
    },
    write: {
      type: Boolean
    },
    isNoCounty: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      options: [],
      params: {
        props: {
          value: 'id',
          label: 'regionName',
          children: 'children'
        }
        // selectApi: cinema.getRegion
      },
      value1: [],
      writeLoading: false,
      currentData: {},
      selectLoading: false,
      children: [],
      isOnce: true,
      cityName: [],
      isCanchose: false,
      isChosed: false
    }
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        this.isCanchose = !this.isCanchose
        if (val !== null && this.options.length && this.isNoCounty) {
          this.changeValue(val, this.options)
        }
      },
      deep: true
    },
    isCanchose () {
      if (
        this.value &&
        this.value.length &&
        this.options.length &&
        !this.isChosed
      ) {
        this.changeValue(this.value, this.options)
        this.isChosed = true
      }
    }
  },
  created () {
    this.getOption()
  },
  methods: {
    async changeCity (val) {
      let len = val.length
      let res = []
      let name = {}
      if (len === 1 || len === 2) {
        res = await this.fetchOptions(val[len - 1])
      }
      this.options.length &&
        this.options.map(async item => {
          if (+item.id === +val[0]) {
            this.$set(name, 'pove', item.regionName)
            if (len === 1) {
              this.$set(item, 'children', res)
              if (item.children && item.children.length) {
                item.children.map(child => {
                  if (!this.isNoCounty) this.$set(child, 'children', [])
                })
              }
            } else if (len === 2) {
              item.children.map(children => {
                if (+children.id === +val[1]) {
                  this.$set(name, 'city', children.regionName)
                  if (!this.isNoCounty) this.$set(children, 'children', res)
                }
              })
            } else if (len === 3) {
              item.children.map(children => {
                if (+children.id === +val[1]) {
                  this.$set(name, 'city', children.regionName)
                  if (children.children && children.children.length) {
                    children.children.map(grand => {
                      if (+grand.id === +val[2]) {
                        this.$set(name, 'county', grand.regionName)
                      }
                    })
                  }
                }
              })
            }
          }
        })
      let cityParams = []
      let cityList = {}
      if (val[0]) {
        this.$set(cityList, 'pove', { id: val[0], name: name.pove })
      }
      if (val[1]) {
        this.$set(cityList, 'city', { id: val[1], name: name.city })
      }
      if (val[2]) {
        this.$set(cityList, 'county', { id: val[2], name: name.county })
      }
      if (len === 1) {
        cityParams = cityParams.concat(cityList.pove)
      } else if (len === 2) {
        cityParams = cityParams.concat(cityList.pove, cityList.city)
      } else if (len === 3) {
        cityParams = cityParams.concat(
          cityList.pove,
          cityList.city,
          cityList.county
        )
      }
      this.$emit('changeCityList', cityParams)
    },
    getCityName (val, option) {
      let options = [...option]
      if (options && options.length) {
        for (var i = 0; i < options.length; i++) {
          if (+val === +options[i].id) {
            return options[i].regionName
          } else {
            if (options[i].children && options[i].children.length) {
              return this.getCityName(val, options[i].children)
            }
          }
        }
      }
    },
    getDisable (value1) {
      if (this.write === true && this.isOnce === true) {
        this.writeLoading = true
        if (value1.length !== 0) {
          this.writeLoading = false
        } else {
          this.writeLoading = true
        }
        this.isOnce = false
      } else {
        this.writeLoading = false
      }
    },
    async changeValue (val, options) {
      this.writeLoading = true
      if (val && val.length) {
        options.map(async item => {
          if (+item.id === +val[0]) {
            this.$set(item, 'children', await this.fetchOptions(val[0]))
            await this.$nextTick()
            item.children &&
              item.children.length &&
              item.children.map(async child => {
                if (+child.id === +val[1] && !this.isNoCounty) {
                  this.$set(child, 'children', await this.fetchOptions(val[1]))
                } else {
                  this.$set(child, 'children', [])
                }
              })
          }
        })
      }
      this.writeLoading = false
      if (!this.writeLoading) {
        this.value1 = val
      }
      //        this.getDisable(this.value1)
    },
    async handleItemChange (val, options) {
      let len = val.length
      const res = await this.fetchOptions(val[len - 1])
      for (var i = 0; i < this.options.length; i++) {
        if (+this.options[i].id === +val[0]) {
          if (len === 1) {
            this.options[i].children = res
          }
          if (this.options[i].children) {
            for (var j = 0; j < this.options[i].children.length; j++) {
              this.$set(this.options[i].children[j], 'children', [])
              if (+this.options[i].children[j].id === +val[1]) {
                if (len === 2) {
                  this.options[i].children[j].children = res
                }
              }
            }
          }
        }
      }
    },
    //  getChildren(val,options,res){
    //       for(var i = 0;i<options.length;i++){
    //           if(+val === +options[i].id){
    //               if(res){
    //                   options[i].children = res
    //               }
    //           }
    //       }
    //       return options
    //  },
    async fetchOptions (val) {
      // this.selectLoading = true
      // let res
      // try {
      //   res = await this.params.selectApi({ pid: val })
      // } catch (error) {
      //   this.selectLoading = false
      //   return false
      // }
      // return res
    },
    async getOption () {
      // this.options = await this.fetchOptions()
      // for (var i = 0; i < this.options.length; i++) {
      //   this.$set(this.options[i], 'children', [])
      // }
      // this.isCanchose = !this.isCanchose
    }
  }
}
</script>

<style scoped>
</style>
